<template>
  <Tabbar route :fixed="false" safe-area-inset-bottom>
    <TabbarItem replace to="/workbench" @click.native="handleDbClick">
      <span>工作舱</span>
      <template #icon="props">
        <img
          :src="props.active ? icon.activehome : icon.inactivehome"
          class="w-30px !h-30px"
        />
      </template>
    </TabbarItem>
    <TabbarItem replace to="/business">
      <span>公私海</span>
      <template #icon="props">
        <img
          :src="props.active ? icon.activemsg : icon.inactivemsg"
          class="w-30px !h-30px"
        />
      </template>
    </TabbarItem>
  </Tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  components: {
    Tabbar,
    TabbarItem,
  },
  data() {
    return {
      icon: {
        activehome: require("@/assets/icon/tabbar_home.png"),
        inactivehome: require("@/assets/icon/tabbar_home_default.png"),
        activemsg: require("@/assets/icon/tabbar_msg.png"),
        inactivemsg: require("@/assets/icon/tabbar_msg_default.png"),
      },
    };
  },
  methods: {
    handleDbClick() {
      this.$root.$emit("tab-db-click");
    },
  },
};
</script>

<style lang="scss" scoped></style>
